import { useSelector } from 'react-redux';
import { List, Popover, Avatar, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import styles from '../css/LoginAvatar.module.css';

function LoginAvatar(props) {
  const { isLogin } = useSelector((state) => state.user);
  let loginStatus;
  if (isLogin) {
    const data = ['个人中心', '退出登录'];

    const content = <List dataSource={data} renderItem={(item) => <List.Item>{item}</List.Item>} />;

    loginStatus = (
      <Popover content={content} trigger="hover" placement="bottom">
        <div className={styles.avatarContainer}>
          <Avatar src="" size="large" icon={<UserOutlined />} />
        </div>
      </Popover>
    );
  } else {
    loginStatus = (
      <Button type="primary" size="large" onClick={props.loginHandle}>
        注册/登录
      </Button>
    );
  }

  return <div>{loginStatus}</div>;
}

export default LoginAvatar;
